<template>
  <div class="regain theme-Dark" :style="{ right: rightsjuli}">
    <div class="iconfont expanded" title="恢复" @click="restoreDefault" v-html="'&#xeadd;'" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      stationActive: 0,
      rightsjuli: '80px'
    }
  },
  watch: {},
  created() {

  },
  mounted() {
  },
  methods: {
    chuli() {
      switch (this.stationActive) {
        case 0:
        case 2:
          return '125px'
        case 1:
          return '80px'
        case 4:
          return '120px'
        case 3:
          return '125px'
        default:
          return '160px'
      }
    },
    juli() {
      this.rightsjuli = this.chuli()
    },
    // 恢复默认
    restoreDefault() {
      this.$emit('restoreDefault')
    }
  }
}
</script>

<style lang="scss" scoped>
.regain {
  width: 36px;
  height: auto;
  position: absolute;
  right: 160px;
  z-index: 100;
  .expanded {
    width: 36px;
    height: 36px;
    border-radius: 0.208vw;
    font-size: 1.2vw;
    text-align: center;
    line-height: 36px;
    border-radius: 4px;
    box-shadow: 0px 6px 20px 0px rgba(85, 94, 111, 0.16);
  }
}
.iconfont {
  cursor: pointer;
}
.theme-Dark {
  .expanded {
    background: rgba($color: #1a4780, $alpha: 0.8);
    border: solid 1px #175b9b;
    color: #bcdff5;
  }
}
.theme-Light {
  .expanded {
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: solid 1px #43b6ff;
    color: #43b6ff;
  }
}
.transitionBox {
  width: 120px;
  position: absolute;
  right: 0;
}
</style>
